<template>
    <div class="msg_main">
        <div class="msg_user">
            <i class="el-icon-user"></i>
            <div class="msg_user_info">
                {{ names }}
            </div>
            <el-button type="primary" @click="openSelectUser">选择</el-button>
        </div>
        <div class="msg_editor">
            <editor  :data="datas" :exkey="exkeyId" @editorText="editorText"></editor>
                   
        </div>
        <div class="msg_btn">
            <el-button @click="closes">关闭</el-button>
            <el-button type="primary" @click="sendMsg">发送</el-button>
        </div>

        <el-dialog
            width="40%"
            title="选择用户"
            :visible.sync="innerVisible"
            style="left:35%"
            append-to-body>
            <div style="height:600px;">
                <el-table
                    ref="multipleTable"
                    :data="userData"
                    border
                    style="width: 100%"
                    height="600px"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    
                    <el-table-column
                    prop="name"
                    label="名称"
                    width="120">
                    </el-table-column>
                   
                </el-table>
            </div>
            <div class="msg_btn">
                <el-button @click="innerVisible=false">关闭</el-button>
                <el-button type="primary" @click="selectUser">选择</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

export default {
    props:["exkey","data"],
    components:{

        editor: resolve => {require(['./editor.vue'], resolve)}
    },
    data(){
        return{
            innerVisible:false,
            userPost:"/api/api/login/getUserGroup",
            sendMsgPost:"",
            userData:[],
            names:"",
            selectUserDatas:[],
            ids:"",
            sId:"",
            datas:{
                editor:{
                    content:""
                }
            },
            contentText:"",
            type:"",
            exkeyId:"editor.content"
        }
    },
    created(){
        console.log(this.exkey,"kkkkk===========")
        if(this.exkey.sendMsgPost){
            this.sendMsgPost=this.exkey.sendMsgPost;
        }
        if(this.exkey.userPost){
            this.userPost=this.exkey.userPost;
        }
        if(this.exkey.type){
            this.type=this.exkey.type;
        }
        if(this.exkey.pId){
            let ids=this.exkey.pId.split(".");
            this.sId=this.data[ids[0]][ids[1]]
        }
       
    },
    methods:{
        closes(){
            this.$emit("close","")
        },
        loadUser(){
           
            this.$post("",this.userPost,{}).then(data=>{
                this.userData=data;
            })
        },
        openSelectUser(){
            this.loadUser();
            this.innerVisible=true
        },
        selectUser(){
            this.ids="";
            this.names="";
            for(let i=0;i<this.selectUserDatas.length;i++){
                let name=this.selectUserDatas[i].name;
                let id=this.selectUserDatas[i].id;
                this.names=this.names=="" ? name:this.names+","+name;
                this.ids=this.ids=="" ? id:this.ids+","+id;
            }
            this.innerVisible=false;
        },
        handleSelectionChange(val){
            console.log(val,"val===============")
            this.selectUserDatas=val;
        },
        sendMsg(){
            if(!this.names){
                alert("请选择用户");
                return;
            }
            this.$post("",this.sendMsgPost,{sId:this.sId,"usernames":this.names,"userIds":this.ids,content:this.datas.editor.content,contentText:escape(this.contentText),type:this.type}).then(data=>{
                alert("操作成功");
                this.closes();
            })
        },
        editorText(text){
            this.contentText=text;
        }
    }
}
</script>
<style scoped>
.msg_main{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
}
.msg_user{
    height:50px;
    display:flex;
    flex-direction: row;
    border:1px solid #ddd;
    border-bottom:0;
}
.msg_user i{
    font-size:35px;
    line-height:50px;
    padding-left:10px;
}
.msg_user_info{
    flex:1; 
    box-sizing: border-box;
    padding:10px;
}
.msg_editor{
    flex:1;
}
.msg_btn{
    margin-top:20px;
    height:50px;
    text-align:center;
}
</style>